<template>
  <div class="cupload">
    <h3>zfs 参数配置</h3>
    <z-row :gutter="16">
      <z-col :span="8">
        <p>zfs:{{ zfs }}</p>
        <z-upload
  class="upload-demo"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :on-success="handleSuccess"
  :on-error="handleError"
  ref="upload"
  :multiple="false"
  :limit="3"
  :zfs="zfs"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <z-button type="primary">文件上传</z-button>
</z-upload>
        <!-- <z-upload
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-success="handleSuccess"
            :on-error="handleError"
            :on-change="handleChange"
            ref="upload"
            :multiple="false"
            :limit="3"
            :on-exceed="handleExceed"
            accept=".png"
            :auto-upload="false"
            :file-list="fileList">
           <z-button slot="trigger">文件选择</z-button>
            <z-button >上传</z-button>
          </z-upload> -->
      </z-col>
    </z-row>
  </div>
</template>

<script>
const ENV = 'DEV'
export default{
  data() {
      return {
        fileList: [],
        zfs:{
          env:ENV,
          appid: ENV === 'PRO' ? 'ztGpGYlJN4V2-iqvml7xVwIQ' : '',
        },
      };
    },
    methods: {
      handleSuccess(response,file,fileList){
        console.log(response)
        this.$message.success('文件上传成功！');  
      },
      handleError(error,file,fileList){
        const msg = error.message || '请求失败'
        this.$message({
          type:'error',
          message:msg
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`,'提示');
      }
    }
}
</script>
